<div
  class="container"
  *ngIf="!(isLoading$ | async) && (location$ | async) as location; else loading"
>
  <div class="row">
    <article class="storeInfo col-lg-4">
      <h2>{{ location.displayName }}</h2>

      <p *ngIf="location.address" class="storeAddress">
        {{ location.address.line1 }} <br />
        {{ location.address.town + ',' }}
        {{ location.address.region ? location.address.region.name + ',' : '' }}
        {{ location.address.postalCode }}
      </p>

      <section class="contactInfo">
        <p>
          <a [href]="getDirections(location)" target="_blank">Get Directions</a>
        </p>
        <p>Call {{ location.address?.phone }}</p>
        <p>
          <a [routerLink]="{ route: ['contact'] } | cxTranslateUrl"
            >Contact us</a
          >
        </p>
      </section>
      <div class="schedule">
        <cx-schedule [location]="location"> <h3>Store hours</h3> </cx-schedule>
      </div>
    </article>
    <article class="storeMap col-lg-8">
      <cx-store-finder-map [locations]="[location]"></cx-store-finder-map>
    </article>
  </div>

  <div class="row"><h3 class="col-lg-12">Store features</h3></div>

  <article class="row">
    <div class="col-lg-3" *ngFor="let feature of location.features?.entry">
      <div class="storeFeature">{{ feature.value }}</div>
    </div>
  </article>
</div>
<ng-template #loading>
  <div class="cx-store-finder-description__spinner">
    <cx-spinner></cx-spinner>
  </div>
</ng-template>
